<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Node查询预测结果</title>
    {% load static %}
    <link rel="stylesheet" href="{% static 'css/NodeInquiry.css' %}">
    <script>
        toggleNavbar = function () {
            const navbar = document.getElementById('navbar');
            const mainContent = document.getElementById('main-content');
            const toggleButton = document.getElementById('toggleButton'); // 获取按钮元素

            if (navbar.classList.contains('hidden')) {
                navbar.classList.remove('hidden'); // 显示导航
                mainContent.style.width = '80%'; // 恢复主内容宽度
                toggleButton.innerHTML = '<img  class="button4-icon" src="{% static 'icons/chevron-left.svg' %}" alt="左箭头">'; // 切换按钮文字
            } else {
                navbar.classList.add('hidden'); // 隐藏导航
                mainContent.style.width = '100%'; // 主内容占满整个页面
                toggleButton.innerHTML = '<img  class="button4-icon" src="{% static 'icons/chevron-right.svg' %}" alt="右箭头">'; // 切换按钮文字
            }
        }
        window.addEventListener('load', function() {
        // 隐藏消息框逻辑
        const messages = document.getElementById('messages');
        if (messages) {
            setTimeout(() => {
                messages.classList.add('hide');
            }, 4000); // 4秒后开始淡出
            setTimeout(() => {
                messages.style.display = 'none';
            }, 5000); // 5秒后完全隐藏
        }

        // 隐藏错误框逻辑
        const errorBox = document.getElementById('error-box');
        if (errorBox) {
            setTimeout(() => {
                errorBox.classList.add('hide');
            }, 4000); // 4秒后开始淡出
            setTimeout(() => {
                errorBox.style.display = 'none';
            }, 5000); // 5秒后完全隐藏
        }
    });

    </script>
</head>
<body>

<div class="sidebar" id="navbar">
     <img class="logo" src="{% static 'icons/logo.jpg' %}" alt="logo图标">
    <p class="title">SecTraffic</p>
    <p class="underline"></p>
    <div>
        <a href="{% url 'Node' %}">
            <button class="button1">
                <img class="button1-icon" src="{% static 'icons/graynode.png' %}" alt="节点图标">
                <span> Node----上传数据</span>
            </button>
        </a>
    </div>
    <div>
        <a href="{% url 'NodeInquiry' %}">
            <button class="button1">
                <img class="button1-icon" src="{% static 'icons/graynode.png' %}" alt="节点图标">
                <span> Node----查询预测结果</span>
            </button>
        </a>
    </div>
</div>


<div class="content" id="main-content">
    <p>
        <!-- 点击按钮以隐藏或显示导航 -->
        <button class="button4" onclick="toggleNavbar()" id="toggleButton">
            <img class="button4-icon" src="{% static 'icons/chevron-left.svg' %}" alt="隐藏">
        </button>
    </p>
    <!-- 外部边框框 -->
    <div class="outer-box">
        <!-- 身份验证区域 -->
        <form action="{% url 'NodeInquiry' %}" method="post">
            {% csrf_token %}

            <!-- 错误提示区域 -->
            {% if error_message %}
            <div class="error-box" id="error-box">
                <p>{{ error_message }}</p>
            </div>
            {% endif %}

            <div class="verification-box">
                <div class="verification-header">
                    <img src="{% static 'icons/identity.png' %}" alt="身份验证图标" class="identity-icon">
                    <h2>身份验证</h2>
                </div>

                <!-- 输入框部分 -->

                    <!-- 账号输入框 -->
                    <div class="input-group">
                        <label for="account">账号</label>
                        <div class="input-wrapper">
                            <img src="{% static 'icons/user1.png' %}" alt="账号图标">
                            <input type="text" id="account" name="account" placeholder="请输入账号" required>
                        </div>
                    </div>

                    <!-- 密码输入框 -->
                    <div class="input-group">
                        <label for="password">密码</label>
                        <div class="input-wrapper">
                            <img src="{% static 'icons/lock1.png' %}" alt="密码图标">
                            <input type="password" id="password" name="password" placeholder="请输入密码" required>
                        </div>
                    </div>

            </div>
            <!-- 提示信息 -->
                    <p class="verification-message">请再次进行身份核验以发送预测请求或查询预测结果</p>

            <!-- 发送预测请求按钮 -->
                <div class="confirmdiv">
                    <button type="submit" class="confirm-btn" name="action" value="predict">发送预测请求</button>
                </div>
            <!-- 确认按钮 -->
                <div class="confirmdiv">
                    <button type="submit" class="confirm-btn" name="action" value="inquiry">查询预测结果</button>
                </div>


        </form>


    </div>

<!-- 提示信息框 -->
    <div id="message-box" style="display: none;"></div>


</div>
</body>
</html>